<template>
	<view class="login_box">
		<!-- 默认头像图标 -->
		<uni-icons type="contact-filled" size="100" color="#afafaf" />
		<!-- 登录按钮 -->
				<!-- @getuserinfo 是固定写法 -->
		<button 
			type="primary" 
			class="btn_login" 
			@click="getuserinfo" 
		>
			一键登录
		</button>
		<!-- 登录提示 -->
		<view class="tips_text">登陆后尽享更多权益</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	
 	export default {
		name:"login-component",
		data() {
			return {
				
			};
		},
		computed: {
			...mapState('store_user', ['redirectInfo'])
		},
		methods: {
			...mapMutations('store_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']),
			
			// 返回上一个页面
			navigateBack() {
				this.redirectInfo && this.redirectInfo.openType === 'swichTab' 
				? 
					uni.switchTab({
						url: '/pages/cart/cart',
						complate: () => {
							this.updateRedirectInfo(null)
						}
					})
				: 
				 false
			},
			
			// 获取微信用户的基本信息
			getuserinfo(e) {
				uni.getUserProfile({
					desc: '你的授权信息',
					success: res => {
						console.log(res)
						
						let query = {
							encryptedData: res.encryptedData,
							iv: res.iv,
							rawData: res.rawData,
							signature: res.signature
						}
						
						// 存储到 vuex
						this.updateUserInfo(res.userInfo)
						
						// 返回到上一个页面
						this.navigateBack()
						
						
						// 获取 token
						this.getToken(query)
					},
					fail: err => uni.$showMsg('您取消了登录授权！')
				})
			},
			
			// 获取 微信 Code
			async getToken(info) {
				// console.log(info)
				const [err, res] = await uni.login().catch(err => err)
	
				err || res.errMsg !== 'login:ok' ? uni.$showMsg('登录失败') : console.log(res)
				
				let query = {
					code: res.code,
					encryptedData: info.encryptedData,
					iv: info.iv,
					rawData: info.rawData,
					signature: info.signature
				}
				
				const loginResult = await uni.$http.post('https://www.escook.cn/api/public/v1/users/wxlogin', query)
				// loginResult.data.meta.status !== 200 ? uni.$showMsg('登录失败！') : uni.$showMsg('登录成功！') 
				console.log(loginResult)
				
				// 把 token 保存到 vuex 中
				// this.updateToken(loginResult.token)		// loginResult 中数据获取失败
			}
		}
	}
</script>

<style lang="scss">
	.login_box { 
		width: 100%;
		height: 700rpx;
		display: flex;
		flex-direction: column;
		text-align: center;
		padding: 30rpx 10rpx;
		.btn_login {
			width: 90%;
			border-radius: 50rpx;
			border: none;
			margin: 30rpx auto;
		}
		.tips_text {
			color: #C0C4CC;
		}
	}
</style>
